<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">編輯</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign"
                style="max-width: 600px">
                <el-form-item label="ID:">
                  <el-input v-model="formLabelAlign.id" disabled style="width: 380px;" />
                </el-form-item>
                <el-form-item label="輪播:" required style="align-items:start ;">
                  <div class="swiperbox">
                    <div class="uploader flex-cen" v-if="formLabelAlign.image == ''">
                      <el-icon size="60" style="color: #3a3f63;">
                        <Picture />
                      </el-icon>
                    </div>
                    <el-upload :headers="headers" name="images" :action="$upUrl" v-model:file-list="fileList"
                      list-type="picture-card" :on-remove="remove" :on-success="onSuccess">
                      <el-button class="btn2 ml20">選擇文件</el-button>
                    </el-upload>

                  </div>

                </el-form-item>
                <el-form-item label="标题:">
                  <el-input v-model="formLabelAlign.title" placeholder="请输入标题" />
                </el-form-item>
                <!-- <el-form-item label="展示時間:">
                  <el-input v-model="formLabelAlign.start_show" />
                </el-form-item> -->
                <el-form-item label="展示時間:">
                  <el-input v-model="selectTime" placeholder="请选择展示时间" style="width: 380px"
                    :suffix-icon="ArrowRight"></el-input>

                  <div class="opcaticy0">
                    <el-date-picker v-model="time" type="daterange" start-placeholder="Start date"
                      value-format="YYYY/MM/DD" end-placeholder="End date" :default-time="defaultTime"
                      @change="(e) => change(e)" />
                  </div>


                </el-form-item>
                <el-form-item label="創建時間:">
                  <el-input v-model="formLabelAlign.created_at" disabled />
                </el-form-item>
                <el-form-item label="更新時間:">
                  <el-input v-model="formLabelAlign.updated_at" disabled />
                </el-form-item>
                <el-form-item label="是否展示:">
                  <el-switch v-model="isShow" class="ml-2"
                    style="--el-switch-on-color: #3a3f63; --el-switch-off-color: #dcdfe6" />
                </el-form-item>
              </el-form>
              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1">重置</el-button>
                  <el-button class="btn2" @click="submit">提交</el-button>
                </div>

              </div>
            </div>


          </div>

          <!-- <user-card :user="user" /> -->
        </el-col>

        <!-- <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col> -->

        <!-- <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="Activity" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="Timeline" name="timeline">
                <timeline />
              </el-tab-pane>
              <el-tab-pane label="Account" name="account">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col> -->

      </el-row>
    </div>
  </div>
</template>

<script  lang="ts">
import { reactive, ref, onMounted, toRefs, } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import type { FormProps, UploadUserFile } from 'element-plus'
import { UploadFilled, ArrowRight } from '@element-plus/icons-vue'
import { baseURL, headers, formateDate } from '@/utils/utils'
import { editSwiper } from '@/api/swiper'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const selectTime = ref('')
    const time = ref('')
    const isShow = ref(true)
    const labelPosition = ref<FormProps['labelPosition']>('right')
    const defaultTime = ref<[Date, Date]>([
      new Date(2000, 1, 1, 0, 0, 0),
      new Date(2000, 2, 1, 23, 59, 59),
    ])
    const fileList = ref<UploadUserFile[]>([
      {
        name: 'swiper',
        url: ''
      },
    ])
    let obj = reactive({
      formLabelAlign: {},
      img: ''
    })
    const remove = () => {
      obj.formLabelAlign.image = ''
      console.log(obj.formLabelAlign)
    }
    const onSuccess = (res) => {
      console.log('上传成功', res)
      let path = res.data[0].path
      let fullpath = `${baseURL}${path}`
      console.log(fileList.value[0])
      let file = [
        {
          name: 'swiper',
          url: fullpath
        }
      ]
      fileList.value = file
      obj.formLabelAlign.image = fullpath
      console.log(fileList.value)

    }
    const submit = () => {
      obj.formLabelAlign.is_show = isShow.value ? 1 : 0,
        editSwiper(obj.formLabelAlign).then((res) => {
          console.log(res)
          back()
        })
    }
    const change = (val) => {
      console.log('选择时间', val)
      console.log(JSON.parse(JSON.stringify(time.value)))
      selectTime.value = `${formateDate(time.value[0])}-${formateDate(time.value[1])}`
      obj.formLabelAlign.start_show = `${formateDate(time.value[0])}`
      obj.formLabelAlign.end_show = `${formateDate(time.value[1])}`
      console.log(formateDate(time.value[0]))
    }

    onMounted(() => {
      console.log('--路由传参', route.query)
      obj.formLabelAlign = route.query
      fileList.value[0].url = `${route.query.image}`
      selectTime.value = `${route.query.start_show}-${route.query.end_show}`
      isShow.value = route.query.is_show == '1' ? true : false
      console.log('表单', obj.formLabelAlign)
    })

    const back = () => {
      router.back()
    }
    return {
      ...toRefs(obj),
      back,
      labelPosition,
      fileList,
      remove,
      onSuccess,
      submit,
      headers,
      baseURL,
      change,
      ArrowRight,
      time,
      selectTime,
      isShow,
      defaultTime

    }
  }

}
/* 
const checked2 = ref(true)



// const detail = reactive({})


 */

</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
}

:deep(.el-input) {
  box-shadow: none;
}

.swiperbox {
  width: 380px;
  border: 1px solid #ecf0f5;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 15px;
}
</style>